smartSplitter
Splitter is a layout control that allows creating dynamic layouts with resizable and collapsible items.
A splitter allows the creation of an infinite number of panes each with a different size. The size can be set via CSS selector or the property size. The element offers two orientation modes:
- Vertical
- Horizontal
Panes inside the Splitter can be resized in a direction based on the orientation. Several resize modes are available:
- Adjacent
- End
- Proportional
An Additional liveResize property is available giving the user the possibility to monitor the resizing process at real time.
The Splitter offers full keyboard support for the dragging and collapsing operations. You can read all about it in the API docs.
Usage
Generic Splitter
The generic splitter has a vertical orientation by default. It's content is completely empty until the user creates/appends a Splitter Item.
Automatic Splitter Bars
The splitter bars between the panes are created/removed automatically when necessary. The user can lock or hide any particular splitter bar by calling the corresponding method and passing in it's index or instance.
Min/Max Limits
Splitter items can have min and max size limits by setting the corresponding property to the desired item.
Overflowing Content
By default the content of the splitter should fit it's size. If the user sets incorrect sizes or limits( min, max ) the panes will be validated in order to fill the parent completely. Setting the CSS overflow property to 'auto' or 'scroll' on element initialization will change that behavior. If set the size of the items will no longer be validated and they will be able to overflow the container. The content becomes scrollable.
A
B
Style
Customizable themes
Smart material themes are easily customizable. With a simple CSS variable changes the user is able to modify the colors of the Splitter.
By default the element uses Transparent splitter bars while the panes have a white backgorund.
Custom Elements
IntroductionThe browser gives us an excellent tool for structuring web applications. It's called HTML. You may have heard of it! It's declarative, portable, well supported, and easy to work with. Great as HTML may be, its vocabulary and extensibility are limited. The HTML living standard has always lacked a way to automatically associate JS behavior with your markup... until now. Custom elements are the answer to modernizing HTML, filling in the missing pieces, and bundling structure with behavior. If HTML doesn't provide the solution to a problem, we can create a custom element that does. Custom elements teach the browser new tricks while preserving the benefits of HTML.
Smart Elements Framework
Outstanding PerformanceCarefully optimized to deliver great performance on a wide range of devices and browsers. Small in size, highly modular and responsive web components.
Optimal User Experience Across Devices & BrowsersSmart HTML Elements takes the JavaScript and HTML UI development to a professional level. It is platform independent, cross-browser compatible and adjusts for the best user experience across devices.
Web Components CompliantSmart HTML Elements is a reliable, feature rich JavaScript framework based on Custom Elements. It increases productivity and minimizes development cost.
Smart Splitter
Splitter is a layout control that allows creating dynamic layouts with resizable and collapsible items.A splitter allows the creation of an infinite number of panes each with a different size. The size can be set via CSS selector or the property size.
Panes inside the Splitter can be resized or collapsed. Min and Max limits can be applied to each of the panes using the corresponding properties min and max.
Three resize modes available: Adjacent, End and Proportional.
Additionaly the element offers live resize mode that allows to see the resizing operation at real time.
The Splitter offers full keyboard support. You can read all about it in the API docs.
Light theme
With a simple color change the Splitter quickly changes it's appearance
Custom Elements
IntroductionThe browser gives us an excellent tool for structuring web applications. It's called HTML. You may have heard of it! It's declarative, portable, well supported, and easy to work with. Great as HTML may be, its vocabulary and extensibility are limited. The HTML living standard has always lacked a way to automatically associate JS behavior with your markup... until now. Custom elements are the answer to modernizing HTML, filling in the missing pieces, and bundling structure with behavior. If HTML doesn't provide the solution to a problem, we can create a custom element that does. Custom elements teach the browser new tricks while preserving the benefits of HTML.
Smart Elements Framework
Outstanding PerformanceCarefully optimized to deliver great performance on a wide range of devices and browsers. Small in size, highly modular and responsive web components.
Optimal User Experience Across Devices & BrowsersSmart HTML Elements takes the JavaScript and HTML UI development to a professional level. It is platform independent, cross-browser compatible and adjusts for the best user experience across devices.
Web Components CompliantSmart HTML Elements is a reliable, feature rich JavaScript framework based on Custom Elements. It increases productivity and minimizes development cost.
Smart Splitter
Splitter is a layout control that allows creating dynamic layouts with resizable and collapsible items.A splitter allows the creation of an infinite number of panes each with a different size. The size can be set via CSS selector or the property size.
Panes inside the Splitter can be resized or collapsed. Min and Max limits can be applied to each of the panes using the corresponding properties min and max.
Three resize modes available: Adjacent, End and Proportional.
Additionaly the element offers live resize mode that allows to see the resizing operation at real time.
The Splitter offers full keyboard support. You can read all about it in the API docs.
Dark theme
Orientation
smartSplitter has a vertical orientation by default.
Splitter items can be resized horizontally in that orientation.
Travel
New York City
Day reappeared. The tempest still ragged with undiminished fury; but the wind now returned to the south-east. It was a favourable change, and the Tankadere again
Travel
Kangaroo Valley Safari
Located two hours south of Sidney in the Southern Highlands of New South Wales, ...
Travel
Niagara Falls
Niagara Falls is the collective, name of three big waterfalls on the Niagara River in eastern North America, on the border between the United States and Canada. The three waterfalls are: the Horseshoe Falls, sometimes called the Canadian Falls, the American Falls, and the smaller Bridal Veil Falls. The American Falls and the Horseshoe Falls are separated with Goat Island, and the Bridal Veil Falls separated from the other waterfalls with Luna Island.
Unlimited music now
Listen to your favorite artists and albums whenever and whatever, online and offline.
Supermodel
Foster the People
Halcyon Days
Ellie Goulding
Thunder
Imagine Dragons
Anywhere
Rita Ora
Vertical Splitter with two items
Splitters can also have horizontal orientation.
Splitter items can be resized vertically in that orientation.
Travel
New York City
Day reappeared. The tempest still ragged with undiminished fury; but the wind now returned to the south-east. It was a favourable change, and the Tankadere again
Travel
Kangaroo Valley Safari
Located two hours south of Sidney in the Southern Highlands of New South Wales, ...
Travel
Niagara Falls
Niagara Falls is the collective, name of three big waterfalls on the Niagara River in eastern North America, on the border between the United States and Canada. The three waterfalls are: the Horseshoe Falls, sometimes called the Canadian Falls, the American Falls, and the smaller Bridal Veil Falls. The American Falls and the Horseshoe Falls are separated with Goat Island, and the Bridal Veil Falls separated from the other waterfalls with Luna Island.
Unlimited music now
Listen to your favorite artists and albums whenever and whatever, online and offline.
Supermodel
Foster the People
Halcyon Days
Ellie Goulding
Thunder
Imagine Dragons
Anywhere
Rita Ora
Horizontal Splitter with two items
Resize Modes
LiveResize property allows to observe the resize operation at real time.
The splitter has three resize modes.
The first one is called adjacent.
It allows the user to resize two adjacent splitter items.
Call
Antonny
June 20, 2018
Call
Jenifer
June 20, 2018
Call
Alister
June 20, 2018
Call
Bill
June 20, 2018
Vertical Splitter with 4 panes and resizeMode set to Adjacent
The second is called end.
It allows the user to resize the first item on the left of the focused splitter bar and the last.
Ingredients
Campbell
Ingredients
Campbell
Ingredients
Campbell
Ingredients
Campbell
Vertical Splitter with 4 panes and resizeMode set to End
The third is called proportional.
It allows the user to resize the first item on the left of the focused splitter bar and those that are to the right/bottom by mantaining their proportion.
Vertical Splitter with 4 panes and resizeMode set to Proportional
resizeStep property determines the step at which the items resize while dragging a splitter bar. The default step is set to 5pxs.
Demo
Splitters allow to display two or more views at once.
Battery usage statistics by apps
Displaying multiple content in separate containers at the same time have never been easier.
What is Lorem Ipsum?
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Why do we use it?
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed lobortis mi. Sed at urna eget justo tincidunt finibus nec eu nulla. Sed vitae pretium lorem. Sed tristique, risus non pellentesque pellentesque, ligula purus ullamcorper diam, non iaculis enim orci semper nibh. Donec tincidunt ex lacus, sed ornare dui commodo at. Nullam id lectus cursus felis posuere venenatis. Phasellus gravida felis eu vestibulum luctus. Nunc convallis diam sed pretium gravida. Fusce scelerisque leo sem, vitae accumsan arcu tempus ac. Cras commodo augue mauris, eu posuere lectus lobortis auctor. Sed euismod sit amet lectus et bibendum. Aenean congue felis nunc.
Vivamus placerat quam vel eros hendrerit, id sagittis eros suscipit. Cras quis dapibus sem. Maecenas faucibus faucibus metus, sit amet viverra augue auctor quis. Quisque sed lectus sed tellus dapibus vulputate. Aenean sem est, aliquam non ornare ut, tristique et leo. Nulla vehicula urna non aliquet rutrum. Nullam imperdiet nibh a aliquam elementum. Nullam vitae mi posuere, sollicitudin magna at, ultricies magna. Aenean egestas, nulla nec faucibus dictum, sapien elit vulputate odio, ut interdum nisi velit at leo. Proin posuere ac neque id volutpat. In varius dignissim posuere.
Why do we use it?
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
Where does it come from?
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.
Newspaper style splitter